<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" th:href="@{/css/register.css}">
</head>
<body>
<div class="register-wrapper">
    <div class="left-panel">
        <h2>欢迎注册</h2>
        <p>加入我们，开启精彩旅程</p>
        <p>创建您的专属账号</p>
        <div class="mt-4">
            <i class="fas fa-graduation-cap fa-3x"></i>
        </div>
    </div>
    <div class="right-panel">
        <h2><i class="fas fa-user-plus me-2"></i>用户注册</h2>
        <form id="formRegister" method="post" enctype="multipart/form-data">
            <div class="input-group">
                <label for="username">用户名:</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fas fa-user"></i></span>
                    <input type="text" id="username" name="username" class="form-control" required placeholder="请输入用户名">
                </div>
            </div>
            <div class="input-group">
                <label for="password">密码:</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fas fa-lock"></i></span>
                    <input type="password" id="password" name="password" class="form-control" required placeholder="请输入密码">
                </div>
            </div>
            <div class="input-group">
                <label for="confirmPassword">确认密码:</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="fas fa-lock"></i></span>
                    <input type="password" id="confirmPassword" name="confirmPassword" class="form-control" required placeholder="请再次输入密码">
                </div>
                <span id="passwordError" style="color: red"></span>
            </div>

            <button type="submit" class="btn-login">注册</button>
        </form>
        <div class="footer">
            <p>© 2023 云学堂 | 让知识触手可及</p>
        </div>
    </div>
</div>
<script th:src="@{js/register.js}"></script>
</body>
</html>